<template>
	<div class="search-input">
		<img class="icon-search" src="@/assets/img/icon-search.png" alt="搜索" title="搜索">
    <input ref="query" v-model="query" class="input-box" :placeholder="placeholder" />
	</div>
</template>

<script>
import { debounce } from 'assets/js/util'
export default {
	props: {
		placeholder: {
			type: String,
			default: '搜索歌曲、歌手...'
		}	
	},
	data() {
		return {
			query: ''
		}
	},
	methods: {
		clearQuery() {
			this.query = ''
		},
		setQuery(query) {
			this.query = query
		},
		// 文本框失焦，移动端去掉小键盘
		blur() {
			this.$refs.query.blur()
		}
	},
	created() {
		this.$watch(
			'query',
			debounce(newQuery => {
				this.$emit('query',newQuery)
			},200)
		)
	}
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
.search-input {
  display: flex;
  width: 100%;
  height: rem(40);
  background: #333;
  align-items: center;
  padding: 0 rem(10);
  box-sizing: border-box;
  border-radius: rem(6);
}
.search-input .icon-search {
  width: rem(18);
  height: rem(18);
}
.search-input .input-box {
  flex: 1;
  margin: 0 rem(5);
	background: #333;
	border: none;
	outline: none;
  line-height: rem(18);
  color: #fff;
  font-size: rem(14);
  text-indent: rem(5);
}
.search-input .input-box::placeholder {
  color: #fff;
	letter-spacing: rem(2);
}
</style>